<template>
  <div class="edit-box">
    <div class="edit-comp">
      <div class="edit-left">
        <div class="edit-ctrol">
          <div class="left-input">
            <input type="text" placeholder="为文章起一个标题吧~" required >
          </div>
          <div class="right-send">
            <div class="save">已保存~</div>
            <div class="draft" @click="toIndex">{{goToIndex}}</div>
            <div class="publish" @click="publish">发布</div>
          </div>
        </div>
        <div id="wangeditor"></div>
      </div>
      <div v-html="editorData" class="overview-right"></div>
    </div>
  </div>
</template>

<script>
import 'highlight.js/styles/monokai-sublime.css'

// 引入 wangEditor
import WangEditor from 'wangeditor'
import hljs from 'highlight.js'
// import Steps from './steps'

export default {
  components: {
    // Steps
  },
  data () {
    return {
      editor: null,
      editorData: '',
      goToIndex: '返回'
    }
  },
  mounted () {
    const editor = new WangEditor('#wangeditor')
    editor.highlight = hljs
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      console.log(this.editorData)
    }

    // 创建编辑器
    editor.create()

    this.editor = editor

    this.setEditHeight()
    window.addEventListener('resize', () => {
      this.setEditHeight()
    })
  },
  methods: {
    getEditorData () {
      // 通过代码获取编辑器内容
      const data = this.editor.txt.html()
      alert(data)
    },
    changeEditHeight (value) {
      this.editHeight += value
    },
    setEditHeight () {
      if (innerWidth > 2028) {
        document.documentElement.getElementsByClassName('w-e-text-container')[0].style.height = `${innerHeight - 84}px`
      } else if (innerWidth > 1067) {
        document.documentElement.getElementsByClassName('w-e-text-container')[0].style.height = `${innerHeight - 124}px`
      } else if (innerWidth > 747) {
        document.documentElement.getElementsByClassName('w-e-text-container')[0].style.height = `${innerHeight - 164}px`
      } else if (innerWidth > 587) {
        document.documentElement.getElementsByClassName('w-e-text-container')[0].style.height = `${innerHeight - 204}px`
      }
    },
    publish () {
      setTimeout(() => {
        this.$router.push('/')
      }, 3000)
    },
    toIndex () {
      this.timer = setTimeout(() => {
        this.$router.push('/')
      }, 500)
    }
  },
  computed: {
    // editHeight: 'setEditHeight'
  },
  watch: {
    editHeight (newV, old) {
      this.setEditHeight()
    }
  },
  created () {
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less">
.edit-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(77, 155, 179, 1);
  .edit-comp {
    display: flex;
    justify-content: space-around;
    .edit-left {
      width: 880px;
      height: 100vh;
      @media screen and (max-width: 1740px) {
         width: calc(100% - 850px);
      }
      @media screen and (max-width: 1280px) {
         width: 50%;
      }
      .edit-ctrol{
        height: 42px;
        background: rgb(219,235,240);
        display: flex;
        justify-content: space-between;
        .left-input{
          flex: 1 1 auto;
          // border: 1px solid red;
          input{
            width: 98%;
            height: 42px;
            box-sizing: border-box;
            border: 1px solid rgb(21, 121, 116);
            padding-left: 20px;
            font-size: 20px;
            color: cadetblue;
          }
        }
        .right-send{
          width: 240px;
          display: flex;
          .save{
            width: 70px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: rgba(160, 123, 67, 0.5);
          }
          .draft{
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid rgb(15, 101, 107);
            border-radius: 5px;
            box-shadow: -1px -1px 1px rgb(15, 101, 107);
            padding: 0 15px;
            margin: 5px;
            cursor: pointer;
          }
          .publish{
            width: 60px;
            height: 30px;
            line-height: 30px;
            background: rgb(30, 109, 119);
            box-shadow: -1px -1px 1px rgb(15, 101, 107);
            color: blanchedalmond;
            border-radius: 5px;
            text-align: center;
            padding: 0 10px;
            margin: 5px;
            cursor: pointer;
          }
        }
      }
    }
    .overview-right {
      width: 850px;
      height: 100vh;
      background: rgb(173, 177, 167);
      overflow-y: scroll;
      overflow-x: hidden;
      &::-webkit-scrollbar{
        display: none;
      }
      @media screen and (max-width: 1280px) {
         width: 50%;
      }
      pre{
        margin: 5px 0;
        padding: 5px;
        background: rgb(156, 54, 148);
      }
    }
  }
}
</style>
